<template>
	<view class="container020">
		<apptop :toplevel="2"></apptop>
		<view class="whitebg">
			<view class="setli">
				<view class="slil">
					城市：
				</view>
				<view class="slir">
					<picker @change="changeCity" :value="curcity" :range="city">
					  <view class="selector">{{ curcity }}</view>
					</picker>
				</view>
			</view>
			<view class="setli">
				<view class="slil">
					剧本：
				</view>
				<view class="slir">
					{{title}}
				</view>
			</view>
			<view class="setli">
				<view class="slil">
					场控：
				</view>
				<view class="slir" v-if="m_type !== 3">
					{{nickname}}
				</view>
				<view class="slir con-flex" v-else>
					<view class="rname" @click="dmlist('dm')">{{dm.nickname}}</view>
					<view class="rnodm" @click="no_changedm()">
					    无场控
					  </view>
				</view>
			</view>
			<view class="setli">
				<view class="slil">
					剧本门店：
				</view>
				<view class="slir">
					<picker @change="changeShop" :value="curshop" :range="shop">
					  <view class="selector">{{ curshop }}</view>
					</picker>
				</view>
			</view>
			<view class="setli">
				<view class="slil">
					开局房间：
				</view>
				<view class="slir">
					
				</view>
			</view>
			<view class="setli">
				<view class="slil">
					开局时间：
				</view>
				<view class="slir">
					
				</view>
			</view>
		</view>
		<uniPopup ref="dm" type="bottom">
			<view class="popup-dm">
				<view class="ftop">
					<view @click="closeDm"><text class="iconfont">&#xe66e;</text></view>
				</view>
				<view class="dmmain">
					<view class="search-block">
						<view class="search-ico-wapper">
							<text class="iconfont">&#xe689;</text>
						</view>
						<input type="text" v-model="dmkey" confirm-type="search" @confirm="dmlist('extend')" placeholder="场控昵称"
						  class="search-text" maxlength="10" />
						<view class="search-ico-wapper" @click="clearkey('dm')">
							<text class="iconfont" style="font-size: 32rpx">&#xe652;</text>
						</view>
					</view>
					 <scroll-view class="dmlist" scroll-y v-if="hasData_dm">
						<view class="item" v-for="(item, index) in dm_list" :key="item.id">
						  <view class="dmnickname" @click="choseddm(item)">
								<text>({{ item.id }}) {{ item.nickname }}</text>
								<text>{{ item.realname }}</text>
						  </view>
						</view>
					</scroll-view>
					<view class="noresult" v-else> 没有结果 </view>
				</view>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {  uniPopup },
		data() {
			return {
				aid:0,
				title:'',
				m_type:2,
				
				city:[],
				curcity:'请选择',
				
				dmkey: '',
				dm: {
				  nickname: '请选择',
				  id: 'null'
				},
				no_dm: 0,
				dm_list: [],
				hasData_dm: true,
				
				shop: [],
				curshop: '请选择', //剧本门店
			};
		},
		computed: {
		    ...mapState(['userid','nickname']),
		},
		onLoad(option) {
			this.aid = option.aid;
			this.getScript()
			this.getCity()
		},
		methods:{
			async getScript(){
				let result = await this.$http({
					url:"article/articleDetail",
					data:{
						'id':this.aid,
						'visitor_id':this.userid
					},
					method:"POST"
				})
				if(result.errcode == 0){
					this.m_type = result.m_type
					this.title = result.list.title
				}
			},
			closeDm() {
				this.$refs.dm.close()
			},
			clearkey(tp) {
				this.dmkey = ''
				this.dmlist()
			},
			async dmlist() {
			  uni.showLoading({
			    title: '加载中',
			  })
			  let result = await this.$http({
			    url: 'dm/mendian_dm',
			    data: {
					key: this.dmkey,
					visitor_id:this.userid,
					city:this.curcity
			    },
			    method: 'post',
			  })
			  uni.hideLoading()
			
			  if (result.errcode == 0) {
			    this.dm_list = result.list
			
			    this.$refs.dm.open()
			  } else {
			    this.hasData_dm = false
			  }
			},
			no_changedm() {
				this.dm = {
					nickname: '无场控',
					id: 0
				}
				this.no_dm = 1
			},
			choseddm(t) {
				this.dm = t
				this.no_dm=0
				this.$refs.dm.close()
			},
			async getCity() {
				let result = await this.$http({
					url: 'web/citylist',
					method: 'POST',
				})
				if (result.errcode == 0) {
					 result.list.forEach((v,k)=>{
						this.city[k] = v.name
					})
					this.curcity = this.city[0]
					this.city.unshift('请选择')					
					
					this.getShop()
				}
			},
			changeCity(e){
				this.curcity = this.city[parseInt(e.target.value)]
				
				this.getShop()
			},
			async getShop() {
				let result = await this.$http({
					url: 'web/gameShop',
					data: {
						'aid':this.aid,
						'visitor_id':this.userid,
						'city': this.curcity
					},
					method: 'POST',
				})
				if (result.errcode == 0) {
					this.shop = result.list
					this.shop.unshift('请选择')
				}
			},
			changeShop(e) {
				this.curshop = this.shop[parseInt(e.target.value)]
			},
		}
	}
</script>

<style lang="less">
.setli{
	display: flex;
	align-items: center;
	.slil{
		width: 160rpx;
		text-align: right;
		line-height: 90rpx;
	}
	.slir{
		.rname{
			width: 274rpx; 
			height: 50rpx;
			line-height: 50rpx;
			text-align: center; 
			border: 1rpx solid #ccc;
		}
		.rnodm{
			margin-left: 20rpx;
			line-height: 50rpx;
			text-align: center;
			color: #333333;
			width: 120rpx;
			height: 50rpx;
			background: linear-gradient(270deg, #50e0ad 0%, #73fbc9 100%);
			border-radius: 10rpx;
		}
	}
}
.popup-dm {
    background-color: #f1f1f1;
    padding: 10rpx 20rpx;
    width: calc(100vw - 40rpx);
    .ftop {
        display: flex;
        justify-content: flex-end;
    }
    .dmmain {
        /* 搜索框 */
        .search-block {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #808080;
			border-radius: 15rpx;
			margin-bottom: 10rpx;
			padding: 0 10rpx;

			.search-ico-wapper {
				line-height: 60rpx;
				width: 60rpx;
				text-align: center;
			}

			.search-text {
				line-height: 60rpx;
				width: 100%;
			}
        }

        .dmlist {
			height: 700rpx;
			.item {
				.dmnickname {
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx dashed #1482d1;
					line-height: 70rpx;
				}
			}
        }
        .noresult {
			padding: 0 20rpx;
			text-align: center;
			height: 700rpx;
			line-height: 400rpx;
        }
    }
}
</style>
